<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIGC 作品展示平台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.7.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.net/tailwindcss/2.2.9/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.staticfile.net/motion.js/0.3.0/motion.min.js"></script>
    <style>
        :root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --accent-color: #10b981;
            --light-bg: #f9fafb;
            --light-card: #ffffff;
            --dark-bg: #0f172a;
            --dark-card: #1e293b;
            --text-dark: #1e293b;
            --text-light: #f8fafc;
            --border-radius: 1rem;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .light-mode {
            --bg-color: var(--light-bg);
            --card-bg: var(--light-card);
            --text-color: var(--text-dark);
            --border-color: rgba(0, 0, 0, 0.1);
            --shadow-color: rgba(0, 0, 0, 0.1);
        }
        
        .dark-mode {
            --bg-color: var(--dark-bg);
            --card-bg: var(--dark-card);
            --text-color: var(--text-light);
            --border-color: rgba(255, 255, 255, 0.1);
            --shadow-color: rgba(0, 0, 0, 0.3);
        }
        
        body {
            background: linear-gradient(135deg, var(--bg-color) 0%, #dadde2 100%);
            color: var(--text-color);
            transition: var(--transition);
            font-family: 'Noto Sans SC', sans-serif;
            background-attachment: fixed;
        }
        
        .navbar {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .dark-mode .navbar {
            background: rgba(15, 23, 42, 0.85) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        
        .card {
            background: var(--card-bg);
            transition: var(--transition);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 10px 25px -5px var(--shadow-color);
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
            z-index: 0;
            opacity: 0;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px -10px var(--shadow-color);
        }
        
        .card:hover::before {
            opacity: 1;
        }
        
        .thumbnail-container {
            position: relative;
            width: 100%;
            aspect-ratio: 3/4;
            overflow: hidden;
            border-radius: var(--border-radius) var(--border-radius) 0 0;
        }
        
        .thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            z-index: 1;
        }
        
        .thumbnail:hover {
            transform: scale(1.08);
        }
        
        .category-tag {
            position: absolute;
            top: 12px;
            left: 12px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 0.35rem 0.85rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 2;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .card-content {
            padding: 1.25rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            z-index: 1;
        }
        
        .card-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.75rem;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: var(--transition);
        }
        
        .card:hover .card-title {
            color: var(--primary-color);
        }
        
        .card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.875rem;
            color: var(--text-color);
            opacity: 0.8;
            margin-top: auto;
        }
        
        .card-meta .date {
            font-weight: 500;
        }
        
        .card-meta .models {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            background: rgba(99, 102, 241, 0.1);
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
        }
        
        .loading-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        
        .scroll-indicator {
            position: fixed;
            bottom: 2.5rem;
            right: 2.5rem;
            z-index: 50;
            background: var(--primary-color);
            color: white;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
            animation: bounce 2s infinite;
            transition: var(--transition);
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
        
        .scroll-indicator:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 12px 30px rgba(99, 102, 241, 0.5);
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-12px);
            }
            60% {
                transform: translateY(-6px);
            }
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: content-box;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color);
        }
        
        /* 模态框样式 */
        .modal-content {
            max-height: 90vh;
            overflow-y: auto;
            padding: 2rem;
            background: #eee;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .modal-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-color);
        }
        
        .modal-close {
            background: rgba(0, 0, 0, 0.1);
            color: var(--text-color);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .modal-close:hover {
            background: var(--primary-color);
            color: white;
            transform: rotate(90deg);
        }
        
        .modal-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        
        .modal-image-container {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 20px 40px -15px var(--shadow-color);
            position: relative;
        }
        
        .modal-image {
            width: 100%;
            height: auto;
            display: block;
            transition: var(--transition);
        }
        
        .modal-image:hover {
            transform: scale(1.02);
        }
        
        .info-section {
            margin-bottom: 1.5rem;
        }
        
        .info-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--primary-color);
            display: inline-block;
        }
        
        .info-item {
            margin-bottom: 0.75rem;
            display: flex;
            align-items: flex-start;
        }
        
        .info-label {
            font-weight: 300;
            min-width: 80px;
            color: var(--text-color);
            opacity: 0.9;
        }
        
        .info-value {
            flex: 1;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .model-item {
            background: rgba(99, 102, 241, 0.1);
            border-left: 4px solid var(--primary-color);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 0.75rem;
            transition: var(--transition);
        }
        
        .model-item:hover {
            transform: translateX(5px);
            background: rgba(99, 102, 241, 0.15);
        }
        
        .prompt-text {
            background: rgba(16, 185, 129, 0.1);
            border-left: 4px solid var(--accent-color);
            border-radius: 0.5rem;
            padding: 1.25rem;
            white-space: pre-wrap;
            word-break: break-word;
            line-height: 1.7;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .prompt-text:hover {
            background: rgba(16, 185, 129, 0.15);
        }
        
        /* 转换工具面板 */
        .convert-panel {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: 0 15px 35px -10px var(--shadow-color);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
            margin-bottom: 2rem;
            transition: var(--transition);
        }
        
        .convert-panel:hover {
            box-shadow: 0 20px 45px -15px var(--shadow-color);
        }
        
        .convert-header {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1.25rem;
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .convert-content {
            padding: 1.5rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-color);
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }
        
        .range-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .range-slider {
            flex: 1;
        }
        
        .btn-group {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            font-size: 0.95rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .btn-primary {
            background: var(--primary-color);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }
        
        .btn-primary:hover {
            background: #4f46e5;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-2px);
        }
        
        .progress-container {
            margin-top: 1.5rem;
            display: none;
        }
        
        .progress-bar-container {
            width: 100%;
            height: 12px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 9999px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            border-radius: 9999px;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            font-size: 0.875rem;
            color: var(--text-color);
            opacity: 0.8;
        }
        
        /* 类别按钮 */
        .category-btn {
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
            transition: var(--transition);
            border: 1px solid transparent;
        }
        
        .category-btn.active {
            background: var(--primary-color);
            color: white;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }
        
        .category-btn:not(.active) {
            background: transparent;
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }
        
        .category-btn:not(.active):hover {
            background: rgba(99, 102, 241, 0.1);
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        /* 加载更多按钮 */
        .load-more-btn {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem 2rem;
            border-radius: 9999px;
            font-weight: 500;
            font-size: 1rem;
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
            transition: var(--transition);
        }
        
        .load-more-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
        }
        
        /* 主题切换按钮 */
        .theme-toggle {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .theme-toggle:hover {
            background: rgba(99, 102, 241, 0.1);
            color: var(--primary-color);
            transform: rotate(15deg);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .modal-grid {
                grid-template-columns: 1fr;
            }
            
            .modal-content {
                padding: 1.5rem;
            }
            
            .modal-header {
                flex-direction: column;
                align-items: stretch;
                gap: 1rem;
            }
            
            .thumbnail-container {
                aspect-ratio: 3/4;
            }
        }
        
        @media (max-width: 640px) {
            .btn-group {
                flex-direction: column;
            }
            
            .modal-title {
                font-size: 1.5rem;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease forwards;
        }
    </style>
</head>
<body class="font-sans antialiased transition-colors duration-300 light-mode">
    <!-- 导航栏 -->
    <nav class="navbar sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <div class="w-10 h-10 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
                            <i class="fas fa-robot text-white text-lg"></i>
                        </div>
                        <h1 class="text-xl font-bold text-gray-900 dark:text-white ml-3">AIGC</h1>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 类别筛选 -->
                    <div id="category-filter" class="hidden md:block">
                        <div class="ml-4 flex items-center space-x-3" id="category-buttons">
                            <?php
                            // 获取所有类别
                            $categories = ['根目录'];
                            $tempPath = 'temp';
                            
                            if (is_dir($tempPath)) {
                                $items = scandir($tempPath);
                                foreach ($items as $item) {
                                    if ($item != '.' && $item != '..' && is_dir($tempPath . '/' . $item)) {
                                        $categories[] = $item;
                                    }
                                }
                            }
                            
                            // 输出类别按钮
                            echo '<button class="category-btn active" data-category="根目录">根目录</button>';
                            
                            foreach ($categories as $category) {
                                if ($category !== '根目录') {
                                    echo '<button class="category-btn" data-category="' . htmlspecialchars($category) . '">' . htmlspecialchars($category) . '</button>';
                                }
                            }
                            ?>
                        </div>
                    </div>
                    
                    <!-- 模式切换 -->
                    <button id="theme-toggle" class="theme-toggle">
                        <i class="fas fa-moon"></i>
                    </button>
                    
                    <!-- 转换工具按钮 -->
                    <button id="convert-btn" class="hidden md:flex items-center px-4 py-2 rounded-lg text-sm font-medium text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 shadow-lg">
                        <i class="fas fa-sync-alt mr-2"></i>
                        生成缩略图
                    </button>
                    
                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden p-2 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700" id="mobile-menu-button">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-4 pt-4 pb-4 space-y-2 sm:px-6" id="mobile-category-buttons">
                <?php
                echo '<button class="w-full text-left px-4 py-3 rounded-lg bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 category-btn active" data-category="根目录">根目录</button>';
                
                foreach ($categories as $category) {
                    if ($category !== '根目录') {
                        echo '<button class="w-full text-left px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 category-btn" data-category="' . htmlspecialchars($category) . '">' . htmlspecialchars($category) . '</button>';
                    }
                }
                ?>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <!-- 标题 -->
        <div class="mb-10 text-center">
            <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">AIGC 作品展示</h2>
            <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">探索人工智能创造的艺术世界，感受科技与艺术的完美融合</p>
        </div>
        
        <!-- 转换工具面板 -->
        <div class="convert-panel hidden" id="convert-panel">
            <div class="convert-header">
                <i class="fas fa-image"></i>
                <h3 class="text-lg font-semibold">批量生成缩略图</h3>
            </div>
            <div class="convert-content">
                <div class="form-group">
                    <label class="form-label">缩略图宽度</label>
                    <input type="number" id="thumbnail-width" value="300" min="100" max="800" class="form-control" placeholder="输入缩略图宽度">
                </div>
                <div class="form-group">
                    <label class="form-label">质量 (1-100)</label>
                    <div class="range-container">
                        <input type="range" id="quality-slider" min="1" max="100" value="80" class="range-slider">
                        <span id="quality-value" class="font-medium">80</span>
                    </div>
                </div>
                <div class="btn-group">
                    <button id="start-convert" class="btn btn-primary">
                        <i class="fas fa-play"></i>
                        <span>开始转换</span>
                    </button>
                    <button id="cancel-convert" class="btn btn-secondary">
                        <i class="fas fa-times"></i>
                        <span>取消</span>
                    </button>
                </div>
                <div id="convert-progress" class="progress-container">
                    <div class="progress-bar-container">
                        <div id="progress-bar" class="progress-bar"></div>
                    </div>
                    <p id="progress-text" class="progress-text">0/0 已完成</p>
                </div>
            </div>
        </div>
        
        <!-- 作品网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-6" id="gallery-grid">
            <?php
            // 获取作品数据
            $works = [];
            $tempPath = 'temp';
            
            // 检查temp目录是否存在
            if (is_dir($tempPath)) {
                // 首先处理根目录下的文件
                $rootFiles = scandir($tempPath);
                $webpFiles = [];
                $jsonFiles = [];
                
                // 分离.webp和.json文件
                foreach ($rootFiles as $file) {
                    if ($file != '.' && $file != '..') {
                        if (pathinfo($file, PATHINFO_EXTENSION) === 'webp') {
                            $webpFiles[] = $file;
                        } elseif (pathinfo($file, PATHINFO_EXTENSION) === 'json') {
                            $jsonFiles[] = $file;
                        }
                    }
                }
                
                // 匹配同名的.webp和.json文件
                foreach ($webpFiles as $webpFile) {
                    $baseName = pathinfo($webpFile, PATHINFO_FILENAME);
                    $jsonFile = $baseName . '.json';
                    
                    if (in_array($jsonFile, $jsonFiles)) {
                        // 读取JSON文件
                        $jsonContent = file_get_contents($tempPath . '/' . $jsonFile);
                        $jsonData = json_decode($jsonContent, true);
                        
                        if ($jsonData) {
                            // 获取文件创建时间
                            $fileTime = filemtime($tempPath . '/' . $webpFile);
                            $createdDate = date('Y-m-d', $fileTime);
                            
                            $works[] = [
                                'id' => $baseName,
                                'imageName' => $jsonData['imageName'] ?? $baseName,
                                'category' => '根目录',
                                'thumbnail' => $tempPath . '/' . $webpFile,
                                'imageUrl' => trim($jsonData['imageUrl'] ?? ''),
                                'relatedModels' => $jsonData['relatedModels'] ?? [],
                                'positivePrompt' => $jsonData['positivePrompt'] ?? '',
                                'negativePrompt' => $jsonData['negativePrompt'] ?? '',
                                'samplingMethod' => $jsonData['samplingMethod'] ?? '',
                                'guidanceScale' => $jsonData['guidanceScale'] ?? '',
                                'samplingSteps' => $jsonData['samplingSteps'] ?? '',
                                'created' => $createdDate,
                                'filePath' => $tempPath . '/' . $webpFile
                            ];
                        }
                    }
                }
                
                // 处理子目录
                foreach ($items as $item) {
                    if ($item != '.' && $item != '..' && is_dir($tempPath . '/' . $item)) {
                        $category = $item;
                        $categoryPath = $tempPath . '/' . $category;
                        $categoryFiles = scandir($categoryPath);
                        $categoryWebpFiles = [];
                        $categoryJsonFiles = [];
                        
                        // 分离.webp和.json文件
                        foreach ($categoryFiles as $file) {
                            if ($file != '.' && $file != '..') {
                                if (pathinfo($file, PATHINFO_EXTENSION) === 'webp') {
                                    $categoryWebpFiles[] = $file;
                                } elseif (pathinfo($file, PATHINFO_EXTENSION) === 'json') {
                                    $categoryJsonFiles[] = $file;
                                }
                            }
                        }
                        
                        // 匹配同名的.webp和.json文件
                        foreach ($categoryWebpFiles as $webpFile) {
                            $baseName = pathinfo($webpFile, PATHINFO_FILENAME);
                            $jsonFile = $baseName . '.json';
                            
                            if (in_array($jsonFile, $categoryJsonFiles)) {
                                // 读取JSON文件
                                $jsonContent = file_get_contents($categoryPath . '/' . $jsonFile);
                                $jsonData = json_decode($jsonContent, true);
                                
                                if ($jsonData) {
                                    // 获取文件创建时间
                                    $fileTime = filemtime($categoryPath . '/' . $webpFile);
                                    $createdDate = date('Y-m-d', $fileTime);
                                    
                                    $works[] = [
                                        'id' => $baseName,
                                        'imageName' => $jsonData['imageName'] ?? $baseName,
                                        'category' => $category,
                                        'thumbnail' => $categoryPath . '/' . $webpFile,
                                        'imageUrl' => trim($jsonData['imageUrl'] ?? ''),
                                        'relatedModels' => $jsonData['relatedModels'] ?? [],
                                        'positivePrompt' => $jsonData['positivePrompt'] ?? '',
                                        'negativePrompt' => $jsonData['negativePrompt'] ?? '',
                                        'samplingMethod' => $jsonData['samplingMethod'] ?? '',
                                        'guidanceScale' => $jsonData['guidanceScale'] ?? '',
                                        'samplingSteps' => $jsonData['samplingSteps'] ?? '',
                                        'created' => $createdDate,
                                        'filePath' => $categoryPath . '/' . $webpFile
                                    ];
                                }
                            }
                        }
                    }
                }
                
                // 按创建时间排序（最新在前）
                usort($works, function($a, $b) {
                    return strtotime($b['created']) - strtotime($a['created']);
                });
                
                // 只显示前8个作品
                $displayedWorks = array_slice($works, 0, 8);
                
                // 输出作品卡片
                if (count($displayedWorks) > 0) {
                    foreach ($displayedWorks as $work) {
                        echo '<div class="card group animate-fade-in-up">';
                        echo '<div class="thumbnail-container">';
                        echo '<img src="' . htmlspecialchars($work['thumbnail']) . '" alt="' . htmlspecialchars($work['imageName']) . '" class="thumbnail">';
                        echo '<div class="category-tag">' . htmlspecialchars($work['category']) . '</div>';
                        echo '</div>';
                        echo '<div class="card-content">';
                        echo '<h3 class="card-title">' . htmlspecialchars($work['imageName']) . '</h3>';
                        echo '<div class="card-meta">';
                        echo '<span class="date">' . htmlspecialchars($work['created']) . '</span>';
                        echo '<span class="models">';
                        echo '<i class="fas fa-robot text-xs mr-1"></i>';
                        echo count($work['relatedModels']) . '个模型';
                        echo '</span>';
                        echo '</div>';
                        echo '</div>';
                        echo '</div>';
                    }
                } else {
                    echo '<div class="col-span-full text-center py-16">';
                    echo '<div class="inline-block p-6 bg-gray-100 dark:bg-gray-800 rounded-2xl mb-6">';
                    echo '<i class="fas fa-image text-6xl text-gray-400"></i>';
                    echo '</div>';
                    echo '<h3 class="text-2xl font-bold text-gray-700 dark:text-gray-300 mb-2">暂无作品</h3>';
                    echo '<p class="text-gray-500 dark:text-gray-400">请上传AIGC作品文件或生成缩略图</p>';
                    echo '</div>';
                }
            } else {
                echo '<div class="col-span-full text-center py-16">';
                echo '<div class="inline-block p-6 bg-red-100 dark:bg-red-900/30 rounded-2xl mb-6">';
                echo '<i class="fas fa-exclamation-triangle text-6xl text-red-400"></i>';
                echo '</div>';
                echo '<h3 class="text-2xl font-bold text-red-700 dark:text-red-300 mb-2">temp文件夹不存在</h3>';
                echo '<p class="text-gray-500 dark:text-gray-400">请创建temp文件夹并添加作品文件</p>';
                echo '</div>';
            }
            ?>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="mt-12 text-center">
            <?php if (count($works) > 8): ?>
            <button id="load-more" class="load-more-btn">
                <i class="fas fa-spinner fa-spin mr-2 loading-animation hidden"></i>
                <span>加载更多作品</span>
            </button>
            <?php endif; ?>
        </div>
        
        <!-- 滚动指示器 -->
        <div class="scroll-indicator hidden" id="scroll-indicator">
            <i class="fas fa-arrow-down"></i>
        </div>
    </main>

    <!-- 作品详情模态框 -->
    <div class="fixed inset-0 bg-black bg-opacity-60 z-50 flex items-center justify-center p-4 hidden" id="modal">
        <div class="bg-white dark:bg-gray-800 rounded-2xl max-w-5xl w-full max-h-screen overflow-y-auto animate-fade-in-up">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">作品详情</h3>
                    <button class="modal-close" id="close-modal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-grid">
                    <div class="modal-image-container">
                        <img src="" alt="作品预览" class="modal-image" id="modal-image">
                    </div>
                    <div>
                        
                        <div class="info-section">
                            <h4 class="info-title">关联模型</h4>
                            <div id="modal-related-models" class="space-y-2">
                                <!-- 模型信息将动态填充 -->
                            </div>
                        </div>
                        
                        <div class="info-section">
                            <h4 class="info-title">正向提示词</h4>
                            <div class="prompt-text" id="modal-positive-prompt">
                                <!-- 提示词将动态填充 -->
                            </div>
                        </div>
                        
                        <div class="info-section">
                            <h4 class="info-title">负向提示词</h4>
                            <div class="prompt-text" id="modal-negative-prompt">
                                <!-- 负向提示词将动态填充 -->
                            </div>
                        </div>

                        <div class="info-section">
                            <h4 class="info-title">采样信息</h4>
                            <div class="space-y-3">
                                <div class="info-item">
                                    <span class="info-label">名称:</span>
                                    <span class="info-value" id="modal-image-name"></span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">类别:</span>
                                    <span class="info-value" id="modal-category"></span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">采样器:</span>
                                    <span class="info-value" id="modal-sampling-method"></span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">CFG值:</span>
                                    <span class="info-value" id="modal-guidance-scale"></span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">采样步数:</span>
                                    <span class="info-value" id="modal-sampling-steps"></span>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 从PHP获取作品数据
        const worksData = <?php echo json_encode($works); ?>;
        let currentCategory = '根目录';
        let displayedCount = 8;
        let isLoading = false;
        let isDarkMode = false;

        // DOM元素
        const galleryGrid = document.getElementById('gallery-grid');
        const loadMoreBtn = document.getElementById('load-more');
        const modal = document.getElementById('modal');
        const closeModalBtn = document.getElementById('close-modal');
        const themeToggle = document.getElementById('theme-toggle');
        const convertBtn = document.getElementById('convert-btn');
        const convertPanel = document.getElementById('convert-panel');
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const scrollIndicator = document.getElementById('scroll-indicator');
        const categoryButtons = document.querySelectorAll('.category-btn');
        const qualitySlider = document.getElementById('quality-slider');
        const qualityValue = document.getElementById('quality-value');
        const startConvertBtn = document.getElementById('start-convert');
        const cancelConvertBtn = document.getElementById('cancel-convert');
        const convertProgress = document.getElementById('convert-progress');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');

        // 初始化应用
        function initApp() {
            // 默认浅色模式
            document.body.classList.add('light-mode');
            
            // 绑定事件监听器
            bindEventListeners();
            
            // 显示滚动指示器
            showScrollIndicator();
            
            // 为作品卡片添加点击事件
            addCardClickEvents();
        }

        // 为作品卡片添加点击事件
        function addCardClickEvents() {
            document.querySelectorAll('.card').forEach(card => {
                card.addEventListener('click', function() {
                    // 找到对应的work数据
                    const cardTitle = this.querySelector('.card-title').textContent;
                    const work = worksData.find(w => w.imageName === cardTitle);
                    if (work) {
                        openModal(work);
                    }
                });
            });
        }

        // 绑定事件监听器
        function bindEventListeners() {
            // 加载更多按钮
            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', loadMoreWorks);
            }
            
            // 关闭模态框
            closeModalBtn.addEventListener('click', closeModal);
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            });
            
            // 键盘导航
            document.addEventListener('keydown', handleKeyboardNavigation);
            
            // 主题切换
            themeToggle.addEventListener('click', toggleDarkMode);
            
            // 转换工具
            convertBtn.addEventListener('click', toggleConvertPanel);
            
            // 质量滑块
            qualitySlider.addEventListener('input', function() {
                qualityValue.textContent = this.value;
            });
            
            // 开始转换
            startConvertBtn.addEventListener('click', startConversion);
            
            // 取消转换
            cancelConvertBtn.addEventListener('click', cancelConversion);
            
            // 移动端菜单
            mobileMenuButton.addEventListener('click', toggleMobileMenu);
            
            // 类别筛选
            categoryButtons.forEach(button => {
                button.addEventListener('click', function() {
                    categoryButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    currentCategory = this.getAttribute('data-category');
                    resetDisplayedCount();
                    filterAndLoadWorks();
                });
            });
            
            // 滚动事件
            window.addEventListener('scroll', handleScroll);
            
            // 窗口大小改变
            window.addEventListener('resize', handleResize);
        }

        // 处理键盘导航
        function handleKeyboardNavigation(e) {
            if (e.key === 'Escape' && modal.classList.contains('hidden') === false) {
                closeModal();
            } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
                window.scrollBy({ top: 300, behavior: 'smooth' });
            } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
                window.scrollBy({ top: -300, behavior: 'smooth' });
            }
        }

        // 切换暗色模式
        function toggleDarkMode() {
            isDarkMode = !isDarkMode;
            if (isDarkMode) {
                document.body.classList.remove('light-mode');
                document.body.classList.add('dark-mode');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                document.body.classList.remove('dark-mode');
                document.body.classList.add('light-mode');
                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        }

        // 切换转换面板
        function toggleConvertPanel() {
            if (convertPanel.classList.contains('hidden')) {
                convertPanel.classList.remove('hidden');
                convertBtn.innerHTML = '<i class="fas fa-times mr-2"></i>关闭工具';
            } else {
                convertPanel.classList.add('hidden');
                convertBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i>生成缩略图';
            }
        }

        // 开始转换
        function startConversion() {
            convertProgress.classList.remove('hidden');
            startConvertBtn.disabled = true;
            startConvertBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>转换中...</span>';
            
            // 这里可以添加实际的转换逻辑
            // 例如通过AJAX调用PHP脚本来生成缩略图
            
            // 模拟转换过程 - 只转换没有webp缩略图的文件
            let total = 0;
            let completed = 0;
            
            // 计算需要转换的文件数量（没有同名webp文件的）
            worksData.forEach(work => {
                const baseName = work.id;
                const dirPath = work.category === '根目录' ? 'temp' : `temp/${work.category}`;
                const webpPath = `${dirPath}/${baseName}.webp`;
                
                // 检查webp文件是否存在（这里只是模拟）
                // 在实际应用中，需要通过AJAX请求检查文件是否存在
                total++;
            });
            
            if (total === 0) {
                alert('所有作品都已存在缩略图，无需转换！');
                resetConversionUI();
                return;
            }
            
            const interval = setInterval(() => {
                completed++;
                const progress = (completed / total) * 100;
                progressBar.style.width = `${progress}%`;
                progressText.textContent = `${completed}/${total} 已完成`;
                
                if (completed >= total) {
                    clearInterval(interval);
                    setTimeout(() => {
                        alert('所有缩略图已成功生成！');
                        resetConversionUI();
                    }, 1000);
                }
            }, 500);
        }

        // 重置转换UI
        function resetConversionUI() {
            startConvertBtn.disabled = false;
            startConvertBtn.innerHTML = '<i class="fas fa-play"></i><span>开始转换</span>';
            convertProgress.classList.add('hidden');
            progressBar.style.width = '0%';
            progressText.textContent = '0/0 已完成';
        }

        // 取消转换
        function cancelConversion() {
            convertProgress.classList.add('hidden');
            startConvertBtn.disabled = false;
            startConvertBtn.innerHTML = '<i class="fas fa-play"></i><span>开始转换</span>';
            progressBar.style.width = '0%';
            progressText.textContent = '0/0 已完成';
        }

        // 切换移动端菜单
        function toggleMobileMenu() {
            mobileMenu.classList.toggle('hidden');
        }

        // 处理滚动
        function handleScroll() {
            // 隐藏滚动指示器
            if (window.scrollY > 200) {
                scrollIndicator.classList.add('hidden');
            }
            
            // 无限滚动 - 当接近页面底部时自动加载更多
            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 && !isLoading && loadMoreBtn && loadMoreBtn.classList.contains('hidden') === false) {
                loadMoreWorks();
            }
        }

        // 处理窗口大小改变
        function handleResize() {
            if (window.innerWidth >= 768) {
                mobileMenu.classList.add('hidden');
            }
        }

        // 显示滚动指示器
        function showScrollIndicator() {
            setTimeout(() => {
                if (window.scrollY < 200) {
                    scrollIndicator.classList.remove('hidden');
                }
            }, 2000);
        }

        // 重置显示数量
        function resetDisplayedCount() {
            displayedCount = 8;
            galleryGrid.innerHTML = '<div class="col-span-full text-center py-12"><div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-600"></div><p class="mt-4 text-gray-600 dark:text-gray-400">正在加载作品...</p></div>';
        }

        // 筛选并加载作品
        function filterAndLoadWorks() {
            // 获取筛选后的作品
            let filteredWorks = [];
            
            if (currentCategory === '根目录') {
                filteredWorks = worksData.filter(work => work.category === '根目录');
            } else {
                filteredWorks = worksData.filter(work => work.category === currentCategory);
            }
            
            // 按创建时间排序（最新在前）
            filteredWorks.sort((a, b) => new Date(b.created) - new Date(a.created));
            
            // 只显示指定数量的作品
            const limitedWorks = filteredWorks.slice(0, displayedCount);
            
            // 渲染作品
            setTimeout(() => {
                renderWorks(limitedWorks);
                
                // 更新加载更多按钮状态
                if (filteredWorks.length <= displayedCount) {
                    if (loadMoreBtn) loadMoreBtn.classList.add('hidden');
                } else {
                    if (loadMoreBtn) loadMoreBtn.classList.remove('hidden');
                }
            }, 500);
        }

        // 加载更多作品
        function loadMoreWorks() {
            if (isLoading) return;
            
            isLoading = true;
            if (loadMoreBtn) {
                loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i><span>加载中...</span>';
            }
            
            // 模拟加载延迟
            setTimeout(() => {
                displayedCount += 8;
                filterAndLoadWorks();
                isLoading = false;
                if (loadMoreBtn) {
                    loadMoreBtn.innerHTML = '<span>加载更多作品</span>';
                }
            }, 800);
        }

        // 渲染作品
        function renderWorks(works) {
            galleryGrid.innerHTML = '';
            
            if (works.length === 0) {
                galleryGrid.innerHTML = `
                    <div class="col-span-full text-center py-16">
                        <div class="inline-block p-6 bg-gray-100 dark:bg-gray-800 rounded-2xl mb-6">
                            <i class="fas fa-search text-6xl text-gray-400"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-300 mb-2">未找到作品</h3>
                        <p class="text-gray-500 dark:text-gray-400">请尝试其他分类或上传新作品</p>
                    </div>
                `;
                return;
            }
            
            works.forEach(work => {
                const workCard = document.createElement('div');
                workCard.className = 'card group animate-fade-in-up';
                workCard.innerHTML = `
                    <div class="thumbnail-container">
                        <img src="${work.thumbnail}" alt="${work.imageName}" class="thumbnail">
                        <div class="category-tag">${work.category}</div>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">${work.imageName}</h3>
                        <div class="card-meta">
                            <span class="date">${work.created}</span>
                            <span class="models">
                                <i class="fas fa-robot text-xs mr-1"></i>
                                ${work.relatedModels.length}个模型
                            </span>
                        </div>
                    </div>
                `;
                
                // 添加点击事件
                workCard.addEventListener('click', function() {
                    openModal(work);
                });
                
                galleryGrid.appendChild(workCard);
            });
        }

        // 打开模态框
        function openModal(work) {
            document.getElementById('modal-title').textContent = work.imageName;
            document.getElementById('modal-image-name').textContent = work.imageName;
            document.getElementById('modal-category').textContent = work.category;
            document.getElementById('modal-sampling-method').textContent = work.samplingMethod || "未设置";
            document.getElementById('modal-guidance-scale').textContent = work.guidanceScale || "未设置";
            document.getElementById('modal-sampling-steps').textContent = work.samplingSteps || "未设置";
            document.getElementById('modal-image').src = work.imageUrl || work.thumbnail;
            document.getElementById('modal-positive-prompt').textContent = work.positivePrompt || "无";
            document.getElementById('modal-negative-prompt').textContent = work.negativePrompt || "无";
            
            // 填充关联模型
            const modelsDiv = document.getElementById('modal-related-models');
            modelsDiv.innerHTML = '';
            
            if (work.relatedModels && work.relatedModels.length > 0) {
                work.relatedModels.forEach((model, index) => {
                    const modelDiv = document.createElement('div');
                    modelDiv.className = 'model-item';
                    modelDiv.innerHTML = `
                        <div class="font-medium text-indigo-600 dark:text-indigo-400">模型 ${index + 1}: ${model.name || '未命名'}</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">版本: <span class="font-medium">${model.version || '未知'}</span></div>
                        <div class="text-sm text-gray-600 dark:text-gray-400">类型: <span class="font-medium">${model.type || '未知'}</span></div>
                    `;
                    modelsDiv.appendChild(modelDiv);
                });
            } else {
                modelsDiv.innerHTML = '<p class="text-gray-500 dark:text-gray-400 py-3 text-center">无关联模型</p>';
            }
            
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        // 关闭模态框
        function closeModal() {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>
